import React, { useEffect, useState } from 'react'

// useEffect  用来代替生命周期  useEffect 并不能代替componentDidMount的所有功能

export default function Effect() {
    const [count, setCount] = useState(666)
    const [num, setNum] = useState(888)
    // useEffect 可以设置多个
    // useEffect(callback)
    // 代替实例期 --- 如果说不写第二个参数的时候 只要是修改useState定义的值，都会执行当前useEffect
    // useEffect(() => {
    //     console.log("代替实例期---发起请求")
    // })

    // useEffect(callback, [watch])
    // useEffect第二个参数用来监听通过useState定义的值
    // 如果useEffect第二个参数为空数组，代表谁也不监听，只会初次渲染的时候执行
    // useEffect(() => {
    //     console.log("代替实例期---发起请求")
    // }, [])

    // 存在期
    // useEffect(() => {
    //     console.log("我想要监听count")
    // }, [count])

    // useEffect(() => {
    //     console.log("我想要监听num")
    // }, [num])

    // 销毁期
    useEffect(() => {
        return () => {
            console.log('我被销毁了~~')
        }
    })
    return (
        <div>
            <div>
                count --- {count}
                <button onClick={() => {
                    setCount(count + 1)
                }}>+++++</button>
            </div>

            <div>
                num --- {num}
                <button onClick={() => {
                    setNum(num + 1)
                }}>+++++</button>
            </div>
        </div>
    )
}
